var React = require('react-native');

var {
  View,
  Text,
  PixelRatio,
  TouchableWithoutFeedback,
  StyleSheet
} = React;

var noop = () => {};

var TextFiled = React.createClass({

  
  getDefaultProps() {
    return {
      onPress: noop
    }
  },


  render() {
    return (
      <View style={[styles.view, this.props.style]}>
        <Text style={[styles.text, this.props.textStyle]}>
          {this.props.label}
        </Text>
        <TouchableWithoutFeedback onPress={this._handlePress}>
          <View style={styles.inputBox}>
            <Text style={[styles.input, this.props.textColor]}>{this.props.text}</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  },


  _handlePress() {
    this.props.onPress();
  }
});

var styles = StyleSheet.create({
  view: {
    padding: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#e1e1e1'
  },
  text: {
    fontSize: 14,
    color: '#333'
  },
  inputBox: {
    justifyContent: 'center',
    alignItems: 'flex-end',
    height: 26,
    width: 150,
    marginRight: 5
  },
  input: {
    textAlign: 'right',
    fontSize: 14,
    color: '#bbc1c6',
  }
});


module.exports = TextFiled;
